<template>
  <div class="admin-login">
    <el-card v-loading="loading" class="login-form">
      <template #header>
        <div class="form-header">
          <h2>管理员登录</h2>
        </div>
      </template>
      <el-form
        ref="loginFormRef"
        class="admin-login-form"
        :model="loginForm"
        :rules="rules"
        label-position="top"
        label-width="auto"
        @keyup.enter="handleLogin"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="loginForm.username"
            :prefix-icon="User"
            placeholder="请输入管理员账号"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            :prefix-icon="Lock"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="handleLogin">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { accountApi } from '@/api/modules'
import useAppStore from '@/store/modules/app.js'

const appStore = useAppStore()

const router = useRouter()
const loginFormRef = ref(null)
const loginForm = ref({
  username: '',
  password: '',
})

const rules = {
  username: [
    { required: true, message: '请输入管理员账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度应在3-20个字符之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 20, message: '密码长度应在5-20个字符之间', trigger: 'blur' },
  ],
}

const loading = ref(false)

const handleLogin = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      accountApi.login
        .post(loginForm.value)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success('登录成功！')
            // 根据用户权限动态添加路由
            // 将路由添加到现有路由配置中
            appStore.setToken('login-success!')
            router.push('/tabs/participants')
          } else {
            ElMessage.error(res.message || '登录失败，请重试')
          }
        })
        .catch((err) => {
          ElMessage.error(err.message || '登录失败，请重试！')
        })
        .finally(() => {
          loading.value = false
        })
    } else {
      ElMessage.error('请填写正确的登录信息')
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.admin-login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: calc(100vh - 80px);
  min-width: 1310px;
  min-height: 800px;
  background: url(@/assets/login-bg1.png) no-repeat center center;
  background-color: #f5f7fa;
  background-size: cover;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
  }
}

.login-form {
  width: 100%;
  max-width: 420px;
  position: relative;
  left: -25%;
  z-index: 1;
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateX(5px) translateY(-5px); // 从-15%改为15%，保持悬浮效果
  }

  :deep(.admin-login-form) {
    .el-form-item {
      .el-form-item__content {
        .el-form-item__error {
          padding: 10px;
        }
      }
    }

    .el-form-item__label {
      width: auto;
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      padding-bottom: 5px;
      text-align: left; // 添加左对齐
      padding-left: 2px; // 添加左侧内边距
      opacity: 0.9; // 稍微降低不透明度，使其不那么突兀
    }
  }

  .form-header {
    position: relative;
    padding: 15px 0;
    text-align: center;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 3px;
    }
  }

  :deep(.el-card__header) {
    padding: 10px 0 20px 0;
    border-bottom: none;

    h2 {
      font-size: 28px;
      color: #fff;
      letter-spacing: 18px;
      line-height: 56px;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      font-weight: 600;
    }
  }

  :deep(.el-card__body) {
    padding: 20px 30px 30px !important;
  }

  h2 {
    text-align: center;
    color: #fff;
    margin: 0;
    font-size: 28px;
  }

  .el-form-item {
    margin-bottom: 35px; // 增加底部间距，为错误提示留出更多空间
    position: relative;

    &:last-child {
      margin-bottom: 0;
      margin-top: 35px;
    }

    .el-input {
      height: 45px;
      font-size: 16px;
      border-radius: 8px;

      :deep {
        .el-input__wrapper {
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
          border-radius: 8px;
          padding: 0 15px;
          background: rgba(255, 255, 255, 0.15);
          transition: all 0.3s ease;

          &:hover,
          &.is-focus {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.25);
          }
        }

        .el-input__inner {
          height: 45px;
          line-height: 45px;
          font-size: 16px;
          color: #fff;
          background-color: transparent !important;

          &::placeholder {
            color: rgba(255, 255, 255, 0.7);
          }
        }

        .el-input__prefix {
          display: flex;
          align-items: center;
          color: rgba(255, 255, 255, 0.7);
          font-size: 18px;
          margin-right: 10px;
        }

        .el-input__suffix {
          display: flex;
          align-items: center;
          color: rgba(255, 255, 255, 0.7);
        }

        .el-form-item__error {
          padding-top: 8px;
          font-size: 14px;
          color: #ff3b3b; // 改为更明显的红色
          font-weight: 600;
          margin-left: 2px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          position: absolute;
          bottom: -30px; // 增加与输入框的距离
          background-color: rgba(255, 255, 255, 0.2); // 更明显的背景
          padding: 5px 12px;
          border-radius: 4px;
          width: calc(100% - 24px); // 考虑内边距
          box-sizing: border-box;
          border-left: 3px solid #ff3b3b; // 添加左侧边框增强视觉效果
        }
      }
    }
  }

  .login-btn {
    width: 100%; // 恢复为100%宽度
    margin: 0 auto;
    padding: 12px 0;
    height: 50px;
    line-height: 26px;
    font-size: 18px;
    background: #fff;
    color: #ff7e5f;
    border: none;
    border-radius: 25px;
    letter-spacing: 8px;
    text-indent: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      transition: all 0.5s ease;
    }

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      background: #fff;
      color: #ff5722;

      &::before {
        left: 100%;
      }
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
